<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue/vue.js"></script>
		<script src="vue/vue-router.js"></script>
		<style type="text/css">
			/*默认类名*/
			.router-link-active{
				color: red;
			}
			/*修改过的类名*/
			.myactive{
				color: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--<a href="#/login">登陆</a>
			<a href="#/register">注册</a>-->
			
			<!-- router-link 默认渲染为一个a标签-->
			<router-link to="/login?id=10&name=zs" tag="span">登陆</router-link>
			<router-link to="/register">注册</router-link>
			<!--这是 vue-router 提供的元素，用来当作占位符，路由规则，匹配到的组件，就会展示到这个 router-view 中去-->
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			//登陆注册组件
			var login = {
				template: "<div>登陆页面---{{$route.query.id}}---{{$route.query.name}}</div>",
				data(){
					return {
						msg: '123'
					}
				},
				//组件的生命周期函数
				created(){
					console.log(this.$route.query.id)
				}
			}
			var register = {
				template: "<div>注册页面</div>"
			}
			//创建路由对象
			var routerObj = new VueRouter({
				routes:[
					//路由匹配规则
					//  path: 监听路由链接地址
					//  component: 属性值必须是一个模板对象，不能是组件的引用名称
					{path:'/',redirect:'/login'},//默认显示登陆,重定向
					{path:'/login',component:login},
					{path:'/register',component:register}
				],
				// linkActiveClass 修改被选中的类名
				linkActiveClass: 'myactive'
			})
			var vm = new Vue({
				el: "#app",
				data:{},
				methods:{},
				//将路由规则对象，注册到vm实例上，用来监听 URL 地址的变化来做相应的展示
				router:routerObj
			})
		</script>
	</body>
</html>
